<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <style type="text/css">
  .hide {
    display: none;
  }

  .selected a{
    color: red;
  }
  </style>
</head>

<body>
  <div>
    <a id="public-btn" href="#">公开</a>
    <ul class="hide">
      <li class="selected">
        <a href="#">公开</a>
      </li>
      <li>
        <a href="#">仅自己可见</a>
      </li>
    </ul>
  </div>
</body>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).click(function(event) {
  $("ul").hide();
});

$("#public-btn").click(function(event) {
  $("ul").toggle();
  event.stopPropagation();
});

$("ul").click(function(event) {
    event.stopPropagation();
});

$("ul li").mouseover(function(event) {
    $("li").removeClass('selected');
    $(this).addClass('selected');
});

$("ul li").mouseout(function(event) {
   $(this).removeClass('selected')
});
</script>

</html>
